<template>
    <!-- dialog窗口 用于添加和编辑的弹窗-->
    <el-dialog :title="title" @close="dialogClose" :visible="visible" close-on-click-modal style="text-align:center">
        <el-form :model="stuForm" :rules="stuRules" ref="stuDialogRuleForm">
            <el-form-item label="头像">
                <el-upload class="uploadAvatar" ref="uploadAvatar" action="/api/students/uploadStuAvatar"
                    list-type="picture-card" :on-success="uploadSuccess" :on-remove="removeAvatar" :limit="1"
                    name="headimgurl" :multiple="false" :file-list="fileList" >
                    <i class="el-icon-plus"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-input v-model="stuForm.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="项目地址" prop="productUrl">
                <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="班级" prop="class">
                <el-input v-model="stuForm.class" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
                <el-input v-model="stuForm.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="城市" prop="city">
                <el-input v-model="stuForm.city" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="学历" prop="degree">
                <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="stuForm.description" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="$emit('cancel')">取 消</el-button>
            <el-button type="primary" @click="confirm('stuDialogRuleForm')">确 定</el-button>
        </div>
    </el-dialog>
</template>

<script>
export default{
     props: {
        visible:{
            type:Boolean,
            default(){
                return false
            }
        }
    },
    data () {
        return {
             stuRules: {
                name: [
                    { required: true, message: '请输入名字', trigger: 'blur' }
                ],
                class: [
                    { required: true, message: '请输入班级', trigger: 'blur' }
                ],
                degree: [
                    { required: true, message: '请输入学历', trigger: 'blur' }
                ],
                city: [
                    { required: true, message: '请输入城市', trigger: 'blur' }
                ],
                productUrl: [
                    { required: true, message: '请输入项目地址', trigger: 'blur' }
                ],
                age: [
                    { required: true, message: '请输入年龄', trigger: 'blur' }
                ],
                description: [
                    { required: true, message: '请输入描述', trigger: 'blur' }
                ]
            },
            fileList:[],
            stuForm: {
                name: '',
                productUrl: '',
                headimgurl: '',
                class: '',
                age: '',
                city: '',
                degree: '',
                description: ''
            },
            oldFrom: {},
            title: "增加学员信息",
            showAvatar: true,
        }
    },
    methods: {
        removeAvatar(){

        },
        uploadSuccess(r){
            // 手动给stuForm的headimgurl赋值
            if(r.state){
                this.stuForm.headimgurl = r.headimgurl
            }else{
                this.$message.error(r.msg + "-" + r.err)
            }
            

        },
        confirm(formName){
            // 表单本地校验
            this.$refs[formName].validate(valid =>{
                if(valid){
                    // 本地表单校验通过
                    // 发送请求，讲数据传递到服务器
                    // 关闭dialog
                    this.$emit("ok",this.stuForm)
                    // 点击确定的时候要判断当前是什么行为，是添加还是编辑
                }
            })
        },
        dialogClose(){ //dialog关闭是触发的回调
            // 通过父组件传递下来的方法，关闭dialog
            this.$emit('cancel') 
            this.fileList=[]
        }
    }

}

</script>
  <style>
  .uploadAvatar {
      text-align: left;
  }
  
  .el-upload-list__item.is-success,
  .el-upload--picture-card {
      width: 100px !important;
      height: 100px !important;
      line-height: 100px !important;
  }
  
  .el-dialog__header {
      padding: 0 !important;
      line-height: 60px;
  }
  </style>